* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
  min-height: 100vh;
  background: 
    url('assets/bg_clouds.png') repeat-x,
    url('assets/bg_clouds.png') repeat-x,
    #87ceeb;
  background-size: 300px, 600px, cover; /* different sizes per layer */
  animation: moveClouds1 60s linear infinite,
             moveClouds2 120s linear infinite;
}

@keyframes moveClouds1 {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 100% 0, 0 0, 0 0; }
}

@keyframes moveClouds2 {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 100% 0, 0 0; }
}


.cont-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    padding-bottom: 0px;
}

.cont-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.cont-nav > nav >  ul {
    display: flex;
    list-style: "💭";
    gap: 50px;
}

nav  a {
    text-decoration: none;
    color: lightblue;
    text-shadow: black 1px 1px 2px;
    font-size: 20px;
    font-weight: bold;
}

main {
    padding-top: 50px;
}
.cont-main1 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 20px;
    gap: 50px;
}

.cont-main-sizing {
    width: 75%;
    max-width: 1200px;
    margin: 0 auto;
}

.cont-left-main1 {
    flex: 3;
    padding: 0.25rem;
}

.cont-right-main1 {
    flex: 1;
    padding: 0.25rem;
}

/* making the hedder sticky before the next section makes it scroll away */
.cont-hdr-aboutme,
.cont-hdr-updates {
    position: sticky;
    top: 0;
    z-index: 1;
}

.cont-left-main1,
.cont-right-main1 {
    max-height: 250px;
    min-height: 250px;
    overflow-y: auto;
}

.cont-decoration {
    border: 3px solid #5ac8fa;      /* light blue/cyan border */
    border-radius: 15px;            /* rounded corners */
    box-shadow: 10px 8px 16px rgba(0, 0, 1, 1); /* soft shadow */
    background: rgba(0, 0, 1, 0.55);            /* keep background clean */
    padding: 1rem;                  /* optional for spacing inside */
    box-sizing: border-box;        /* ensures padding is within border */
}

.cont-long-main2,
.cont-long-main3 {
    min-height: 300px;
}

.cont-main2,
.cont-main3 {
    padding-bottom: 25px;
}

.cont-hdr-aboutme,
.cont-hdr-long {
    padding-left: 20px;
    padding-bottom: 15px;
}

.cont-hdr-updates {
    text-align: center;
    padding-bottom: 5px;
}

.updates-list {
    list-style: "⭑";
    padding-left: 10px;
    line-height: 1.25;
}

.updates-list li {
    padding-left: 10px;
}

.struggles-list {
    padding-top: 10px;
    padding-left: 50px;
}

.planned-updates-list {
    padding-left: 50px;
}


























/* Breakpoint for Mobile */
@media (max-width: 768px) {
    .cont-main1 {
    flex-direction: column;
    align-items: center;
    }
}